<template>

	<view class="flowLaunch-v">

		<u-toast ref="uToast"></u-toast><!-- 弹窗 -->

		<view class="view-item">

			<u-form :model="form" ref="uForm">
				<u-form-item class="text-input" label-width="150" label="工单类型 :"><u-input v-model="form.type"
						:disabled="disabled" placeholder="" /></u-form-item>
				<u-form-item class="text-input" label-width="150" label="物料编号 :"><u-input v-model="form.materialCode"
						:disabled="disabled" placeholder="" /></u-form-item>
				<u-form-item class="text-input" label-width="150" label="物料描述 :"><u-input v-model="form.materialDes"
						:disabled="disabled" placeholder="" /></u-form-item>
				<u-form-item class="text-input" label-width="150" label="数量 :"><u-input v-model="form.qty"
						:disabled="disabled" placeholder="" /></u-form-item>
				<u-form-item class="text-input" label-width="150" label="单位 :"><u-input v-model="form.unit"
						:disabled="disabled" placeholder="" /></u-form-item>
				<u-form-item class="text-input" label-width="200" label="计划开始时间 :"><u-input v-model="form.planStartTime"
						:disabled="disabled" placeholder="" /></u-form-item>
				<u-form-item class="text-input" label-width="200" label="计划完成时间 :"><u-input v-model="form.planEndTime"
						:disabled="disabled" placeholder="" /></u-form-item>
				<u-form-item class="text-input" label-width="150" label="备注 :"><u-input v-model="form.remark"
						:disabled="disabled" placeholder="" /></u-form-item>

				<u-form-item class="text-input">
					<u-button type="error" size="medium" plain @click="unqualified"> <u-icon name="close-circle"
							style="margin-right: 5px;"></u-icon>不合格</u-button>
					<u-button type="success" size="medium" plain @click="qualified"> <u-icon name="checkmark-circle "
							style="margin-right: 5px;"></u-icon>合格</u-button>
				</u-form-item>
			</u-form>
		</view>

		<view class="flow-list" v-if="DetailList.length > 0">
			<view class="flow-list-box">
				<uni-swipe-action ref="swipeAction">
					<uni-swipe-action-item v-for="(item, index) in DetailList" :key="item.id" :threshold="0"
						class="data-item">
						<view class="item" @click="deleteitem(item)">
							<view class="item-left">

								<view class="item-tag">
									<u-tag v-show="item.status=='NG'" text="不合格" mode="light" type="error" />
									<u-tag v-show="item.status=='OK'" text="合格" mode="light" type="success" />
								</view>
								<text class="title u-line-1 u-font-28">报工时间 :<text
										class="titInner">{{item.creatorTime | date('yyyy-mm-dd hh:MM')}}</text></text>
								<text class="title u-line-1 u-font-28">作业人员 :<text class="titInner">{{item.qty}}</text>
								</text>
								<text class="title u-line-1 u-font-28">报工数量 :<text
										class="titInner">{{item.operatorId}}</text>
								</text>
								<text class="title u-line-1 u-font-28">不合格数量 :<text
										class="titInner">{{item.ngQty}}</text></text>
								<text class="title u-line-1 u-font-28">实际开始时间 :<text
										class="titInner">{{item.actualStartTime | date('yyyy-mm-dd hh:MM')}}</text></text>
								<text class="title u-line-1 u-font-28">时间完成时间 :<text
										class="titInner">{{item.actualEndTime | date('yyyy-mm-dd hh:MM')}}</text></text>
								<text class="title u-line-1 u-font-28">工时(分钟) :<text
										class="titInner">{{item.workHours}}</text></text>
								<text class="title u-line-1 u-font-28">备注 :<text
										class="titInner">{{item.remark}}</text></text>
							</view>

						</view>
					</uni-swipe-action-item>
				</uni-swipe-action>
			</view>
		</view>



		<view class="buttom-actions">
			<u-button class="buttom-btn" type="success" @click="save">
				完工
			</u-button>
		</view>

		<view>
			<u-modal v-model="showdialog" :title-style="{color: 'red'}" show-cancel-button @confirm="submit">
				<view class="slot-content">
					<u-icon name="error-circle-fill" color="#ffaa00" size="55" style="margin-right: 10px;"></u-icon>
					<rich-text :nodes="content"></rich-text>
				</view>

			</u-modal>
		</view>

		<view>
			<u-modal v-model="deletedialog" :title-style="{color: 'red'}" show-cancel-button @confirm="confirmdelete">
				<view class="slot-content">
					<u-icon name="error-circle-fill" color="#ffaa00" size="55" style="margin-right: 10px;"></u-icon>
					<rich-text :nodes="content"></rich-text>
				</view>

			</u-modal>
		</view>

	</view>

</template>
<script>
	import resources from '@/libs/resources.js'
	import upopup from '@/uview-ui/components/u-popup/u-popup.vue'
	import {

		getworkorderbyid,
		finishWorkorder,
		getworkreport,
		deleteWorkReport

	} from '@/api/q1/business/workorder/workorder.js'
	export default {
		data() {
			return {
				form: {

				},
				ordertype: [],
				unittype: [],
				DetailList: [],
				id: '',
				code: '',
				userCode: '', // 登录人code
				userName: '', // 登录人名称，
				disabled: true,
				showdialog: false,
				deletedialog: false,
				content: '',
				itemdelete: {

				}
			}
		},
		onLoad(e) {
			this.id = e.id;
			this.code = e.code;
			uni.setNavigationBarTitle({
				title: this.code
			})
			this.ordertype = uni.getStorageSync("ordertype");
			this.unittype = uni.getStorageSync("unittype");
			this.getworkorderbyid()
			this.getworkreport()
		},
		onShow() {

		},
		onUnload() {
			uni.$off('refresh')
		},
		onPullDownRefresh() {
			this.getworkorderbyid()
			this.getworkreport()
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 500);
		},
		watch: {
			//类型
			'form.type'(value) {

				this.ordertype.filter(item => {
					if (value == item.enCode) {
						this.form.type = item.fullName
					}
				})

			},
			//单位
			'form.unit'(value) {
				this.unittype.filter(item => {
					if (value == item.enCode) {
						this.form.unit = item.fullName
					}
				})
			},

			'form.planStartTime'(value) {
				const date = new Date(value);
				// 将日期对象格式化为'yyyy-MM-dd HH:mm:ss'格式的字符串
				const formattedDate = date.getFullYear() +
					"-" + (date.getMonth() + 1).toString().padStart(2, "0") +
					"-" + date.getDate().toString().padStart(2, "0") +
					" " + date.getHours().toString().padStart(2, "0") +
					":" + date.getMinutes().toString().padStart(2, "0") +
					":" + date.getSeconds().toString().padStart(2, "0");
				this.form.planStartTime = formattedDate;
			},

			'form.planEndTime'(value) {
				if (value == null || value == '') return;
				const date = new Date(value);
				// 将日期对象格式化为'yyyy-MM-dd HH:mm:ss'格式的字符串
				const formattedDate = date.getFullYear() +
					"-" + (date.getMonth() + 1).toString().padStart(2, "0") +
					"-" + date.getDate().toString().padStart(2, "0") +
					" " + date.getHours().toString().padStart(2, "0") +
					":" + date.getMinutes().toString().padStart(2, "0") +
					":" + date.getSeconds().toString().padStart(2, "0");
				this.form.planEndTime = formattedDate;
			},
		},
		methods: {


			getValue(result) {

				if (result == 'success') {
					this.getworkorderbyid()
					this.getworkreport()
				}
			},
			//提交
			save() {

				this.showdialog = true;
				this.content = '工单' + this.code + '是否确认完工?'
			},
			//提交
			submit() {
				finishWorkorder(this.form.id).then(res => {
					if (res.code == 200) {
						this.$refs.uToast.show({
							title: "提交成功",
							type: 'success',
							duration: 100,
							callback() {
								// 1. 获取当前页面栈实例（此时最后一个元素为当前页）
								let pages = getCurrentPages()
								// 2. 上一页面实例				
								let prevPage = pages[pages.length - 2]
								// 3. 给上一页面实例绑定getValue()方法和参数（注意是$vm）
								prevPage.$vm.getValue("success")
								// 4. 返回上一页面
								uni.navigateBack({
									delta: 1 // 返回的页面数

								})
							}
						});
					}
				}).catch((err) => {})
			},
			//合格
			qualified() {
				const params = JSON.stringify({
					type: '合格',
					formData: this.form,
				})

				uni.navigateTo({
					url: '/pages/q1/business/productionReport/reportsubmit?params=' + params
				})
			},
			//不合格
			unqualified() {

				const params = JSON.stringify({
					type: '不合格',
					formData: this.form,
				})

				uni.navigateTo({
					url: '/pages/q1/business/productionReport/reportsubmit?params=' + params
				})
			},
			//获取数据
			getworkorderbyid() {
				getworkorderbyid(this.id).then(res => {
					//console.log(res)
					this.form = res.data;
				})
			},

			//获取数据
			getworkreport() {

				let query = {
					sort: "desc",
					sidx: "",
					workOrderId: this.id
				}
				getworkreport(query).then(res => {
					if (res.code == 200) {
						this.DetailList = res.data.list
						console.log(res.data.list)
					}
				})
			},

			deleteitem(item) {
				this.deletedialog = true;
				this.content = '此操作将永久删除该数据, 是否继续?'
				this.itemdelete = item;
			},
			//删除
			confirmdelete() {
				deleteWorkReport(this.itemdelete.id).then(res => {
					if (res.code == 200) {
						this.$refs.uToast.show({
							title: "删除成功",
							type: 'success',
							duration: 500,
							callback: () => {
								this.getworkreport()
							},
							bind: this
						});
					}
				}).catch((err) => {})
			},


		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f0f2f6;
	}

	.view-item {
		background-color: white;
		margin: 10px;
		border-radius: 10px;
	}

	.flowLaunch-v {
		width: 100%;

		.text-input {
			padding-left: 20rpx;
			padding-right: 20rpx;
		}

		.flow-list {
			padding-bottom: 44px;
		}

		.flow-list-box {
			width: 95%;

			.item {

				height: 220px;
			}
		}
	}

	.shzy-form {
		margin-top: 40rpx;
	}

	.slot-content {
		display: flex;
		font-size: 30rpx;
		color: $u-content-color;
		padding: 30rpx;

	}

	.item-tag {

		position: absolute;
		right: 15px;
		top: 15px;
	}
</style>